<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shoping list example</title>

    <style>
        li {
            margin-bottom: 10px;
        }
        
        li button {
            font-size: 8px;
            margin-left: 20px;
            color: #666;
        }
    </style>
</head>

<body>
    <h1>My shoping list</h1>

    <div>
        <label for="item">Enter a new item</label>
        <input type="text" name="item" id="item">
        <button>Add item</button>

        <ul>

        </ul>

        <script>
            const list = document.querySelector('ul');
            const input = document.querySelector('input');
            const button = document.querySelector('button');

            button.onclick = function() {
                let myItem = input.value;
                input.value = '';

                const listItem = document.createElement('li');
                const listText = document.createElement('span');
                const listBtn = document.createElement('button');

                listItem.appendChild(listText);
                listText.textContent = myItem;
                listItem.appendChild(listBtn);
                listBtn.textContent = 'Delete';
                list.appendChild(listItem);

                listBtn.onclick = function(e) {
                    list.removeChild(listItem);
                }

                input.focus();
            }
        </script>
    </div>
</body>

</html>